import { jsPDF } from "jspdf"
import html2canvas from 'html2canvas'

function generateHtmlTemplate(details) {
  // <div style="width: 374px;height: 264px;background: #000;"></div>
  return `
    <div style="width: 365px;height: 264px;font-size: 6px;padding: 5px;display: flex;justify-content: space-between;">
        <div style="width: 49.5%;">
            <div style="margin-bottom: 5px;">${details.title}</div>
            <img style="width: 150px;height: 80px;margin-bottom: 5px;" src="${details.imgUrl}" alt="">
            <div style="width: 100%;border-top: 1px solid #0094FF;border-left: 1px solid #0094FF;margin-bottom: 5px;">
                <div style="width: 100%;display: flex;">
                    <div style="flex: 1;color: #0094FF;border-right: 1px solid #0094FF;text-align: center;line-height: 15px;">直播价</div>
                    <div style="flex: 1;color: #0094FF;border-right: 1px solid #0094FF;text-align: center;line-height: 15px;">分佣</div>
                    <div style="flex: 1;color: #0094FF;border-right: 1px solid #0094FF;text-align: center;line-height: 15px;">补充机制</div>
                    <div style="flex: 1;color: #0094FF;border-right: 1px solid #0094FF;text-align: center;line-height: 15px;">库存</div>
                </div>
                <div style="width: 100%;display: flex;">
                    <div style="flex: 1;color: #fff;border-right: 1px solid #fff;text-align: center;line-height: 15px;background: #0094FF;">${details.zbj}</div>
                    <div style="flex: 1;color: #fff;border-right: 1px solid #fff;text-align: center;line-height: 15px;background: #0094FF;">${details.fy}</div>
                    <div style="flex: 1;color: #fff;border-right: 1px solid #fff;text-align: center;line-height: 15px;background: #0094FF;">${details.bcjz}</div>
                    <div style="flex: 1;color: #fff;border-right: 1px solid #0094FF;text-align: center;line-height: 15px;background: #0094FF;">${details.kc}</div>
                </div>
            </div>
            <div style="width: 100%;border-top: 1px solid #E7ECF5;border-left: 1px solid #E7ECF5;">
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">发货时间</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.fhsj}</div>
                </div>
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">发货地、物流</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.fhd}</div>
                </div>
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">不发货地区</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.bfhdq}</div>
                </div>
            </div>
        </div>
        <div style="width: 49.5%;">
            <div style="width: 50px;line-height: 15px;color: #0094FF;border: 1px solid #0094FF;text-align: center;background: #EBF4FF;margin-bottom: 5px;">产品基本信息</div>
            <div style="width: 100%;border-top: 1px solid #E7ECF5;border-left: 1px solid #E7ECF5;margin-bottom: 5px;">
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">品牌</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.pp}</div>
                </div>
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">规格</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.gg}</div>
                </div>
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">材质</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.cz}</div>
                </div>
                <div style="width: 100%;display: flex;">
                    <div style="width: 50px;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;background: #FAFAFA;line-height: 15px;padding-left: 3px;">适用人群</div>
                    <div style="flex: 1;min-width: 0;border-right: 1px solid #E7ECF5;border-bottom: 1px solid #E7ECF5;line-height: 15px;padding-left: 3px;">${details.syrq}</div>
                </div>
            </div>
            <div style="width: 100%;margin-bottom: 5px;line-height: 20px;">
                <div>机制一</div>
            </div>
            <div style="width: 100%;margin-bottom: 5px;line-height: 20px;">
                <div>机制二</div>
            </div>
            <div style="width: 100%;margin-bottom: 5px;line-height: 20px;">
                <div>机制三</div>
            </div>
            <div style="width: 100%;margin-top: 5px;">
                <div style="margin-bottom: 3px;">产品介绍/卖点</div>
                <div>${details.md}</div>
            </div>
        </div>
    </div>
  `;
}

function generatePdf(imgData, token) {
  const doc = new jsPDF({
    orientation: 'landscape',
    unit: 'pt',
    format: 'a4'
  }); // 横向A4纸大小

  doc.addImage(imgData, 'PNG', 0, 0);
  // 将PDF文件转换为Blob并下载
  // const blob = doc.output('blob');
  const fileData = doc.output();
  // const url = URL.createObjectURL(blob, { type: 'application/pdf' });
  const url = URL.createObjectURL(new Blob([fileData], { type: 'application/pdf' }))
  // let reader = new FileReader();
  // reader.readAsDataURL(blob);
  // reader.onload = function () {
  //   let base64data = reader.result;
  //   window.uni.webView.postMessage({
  //     data: {
  //       type: 'downloadPDF',
  //       url: base64data,
  //       header: {
  //         Authorization: `Bearer ${token}`,
  //         clientid: 'e5cd7e4891bf95d1d19206ce24a7b32e'
  //       }
  //     }
  //   })
  // };

  window.uni.webView.postMessage({
    data: {
      type: 'downloadPDF',
      url: url,
      header: {
        Authorization: `Bearer ${token}`,
        clientid: 'e5cd7e4891bf95d1d19206ce24a7b32e'
      }
    }
  })


  // doc.save('商品信息卡.pdf');
}


export const canvasPdf = (productDetails, token) => {
  const htmlTemplate = generateHtmlTemplate(productDetails);
  const div = document.createElement('div');
  div.innerHTML = htmlTemplate;
  document.body.appendChild(div);

  html2canvas(div, {
    useCORS: true,
  }).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    generatePdf(imgData, token);
    document.body.removeChild(div);
  });
}


